<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登陆页面</title>

		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/ajax.js"></script>
		
		
		<script>
			$(function() {

				var vue = new Vue({
					el: '#myModal',
					data: {
						phone: '13590222939',
						password: '123456',
					},
					methods: {
						
						// 1、打开模态框
						showModal: function() {
							console.log('-------准备打开模态框---------');
							//bootstrap的专门语法
							$('#myModal').modal({
								'backdrop': 'static',
							});
						},

						//2、当点击登录按钮的时候干的事情
						login: function() {
							//1、封装数据
							var url = getRootPath() + 'user/login';
							var data = {
								'phone': vue.phone,
								'password': vue.password,
							};

							//2、编写回调函数
							var logCallback = function(dataR) {
								console.log(dataR);

								var data = dataR.data;
								var code = data.code;

								if (code == 200) {
									//说明登陆成功
									//alert('success');

									//1 关闭模态框
									$('#myModal').modal('hide');

									var token = data.data.token;
									//2 请求角色接口判断去哪个页面
									vue.findRole(token);



								}else if(code==403){
									//登录成功，暂无权限，待系统管理员审核
									//1 给予提示
									$('#halfSuccessModal').modal({
										'backdrop': 'static',
									});
									
								} else {
									//登陆失败
									//alert('111');
									//1 给予提示
									//$('#errorModal').modal('static');
									$('#errorModal').modal({
										'backdrop': 'static',
									});
								}
							}
							//3、使用vue发送post请求
							axios.post(url, data).then(logCallback);

						},
						findRole: function(token) {

							if (token != '') {
								// 说明是登陆成功的用户

								//1、封装数据 因为token通过html后面的?token=BT2pUqMMsXqIfUZPr9dyQg== 传递 所以此处可以省略
								url = getRootPath() + 'user/roles';
								var data = {
									token: token,
								};

								//2、编写回调函数
								var roleCallback = function(dataR) {
									//拿到角色
									console.log(dataR);

									var code = dataR.data.code;

									//var data=dataR.data.data;

									//code=dataR.code;
									if (code == 200) {
										var role = dataR.data.data;
										var roleCode = role.roleCode;
										if (roleCode == "admin") {
											//说明是系统管理员
											var token = role.token;
											window.location.href = 'admin/admin.html?token=' + token;
										} else if (roleCode == "class-administrator") {
											var token = role.token;
											window.location.href =
												'class-administrator/index.html?token=' + token;
										} else if (roleCode == "student") {
											var token = role.token;
											window.location.href = 'student/student.html?token=' + token;
										}else if (roleCode == "teacher") {
											var token = role.token;
											window.location.href = 'teacher/teacher.html?token=' + token;
										}

									}
								}

								//3、使用vue发送post请求
								axios.post(url, data).then(roleCallback);
							}

						},
					}

				});
				/* vue.jumpLoginLoading(); */
				vue.showModal();

			});
		</script>
	</head>
	<body>




		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							<span class="glyphicon glyphicon-apple"></span>
							易小勤考勤系统
							<i class="bi bi-arrow-bar-right"></i>
							登录
						</h4>
					</div>
					<div class="modal-body">
						<!-- 表单开始 -->
						<form class="form-horizontal">
							<div class="form-group">
								<label for="phone" class="col-sm-2 control-label">
									<span class="glyphicon glyphicon-phone"></span>
									<!-- 手机 -->
								</label>
								<div class="col-sm-10">
									<input type="tel" class="form-control" id="phone" name="phone" v-model="phone"
										placeholder="13267128038">
								</div>
							</div>
							<div class="form-group">
								<label for="password" class="col-sm-2 control-label">
									<span class="glyphicon glyphicon-lock"></span>
									<!-- 密码 -->
								</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="password" name="password"
										v-model="password" placeholder="123456">
								</div>
							</div>
						</form>
						<!-- 表单结束-->
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-warning" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" v-on:click="login">
							<span class="glyphicon glyphicon-send"></span> &nbsp;登陆
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<!-- 登陆失败提示框 开始 -->
		<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content" style="width: 600px;height: 251px;">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="errorModalLabel">
							<span class="glyphicon glyphicon-remove"></span>
							登陆失败
						</h4>
					</div>
					<div class="modal-body">
						<!-- 表单开始 -->
						<form class="form-horizontal">
							<div class="form-group">
								<p>&nbsp;</p>
								<p style="text-align: center;" class="form-control-static">
									<span class="glyphicon glyphicon-hand-right"></span> &nbsp;
									错误的用户名或密码
								</p>
							</div>
						</form>
						<!-- 表单结束-->
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">确定
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<!-- 登陆失败提示框 结束 -->
		
		<!-- 登陆成功但待分配角色提示框 开始 -->
		<div class="modal fade" id="halfSuccessModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content" style="width: 600px;height: 251px;">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="errorModalLabel">
							<span class="glyphicon glyphicon-remove"></span>
							拒绝访问
						</h4>
					</div>
					<div class="modal-body">
						<!-- 表单开始 -->
						<form class="form-horizontal">
							<div class="form-group">
								<p>&nbsp;</p>
								<p style="text-align: center;" class="form-control-static">
									<span class="glyphicon glyphicon-hand-right"></span> &nbsp;
									登录成功，暂无权限，待系统管理员审核
								</p>
							</div>
						</form>
						<!-- 表单结束-->
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">确定
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<!-- 登陆成功但待分配角色提示框 结束 -->
	</body>
</html>
